import React, { Component } from 'react';
import { StyleSheet, TouchableHighlight, NativeModules, TouchableOpacity, TouchableWithoutFeedback, Image, ImageBackground, FlatList, Linking } from 'react-native';
import {
  Container, Content, Icon, Button, Text, View,
  Left, Body, Right,
  Card, CardItem,
  List, Thumbnail
} from 'native-base';
import { ListItem } from 'react-native-elements'
import { connect } from 'react-redux';
import { Overlay } from 'react-native-elements';

import { Colors, Metrics } from '../theme';
import Swiper from 'react-native-swiper'; 
import Http from '../utils/HttpPost';

const Rnlibrary = NativeModules.Rnlibrary;

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showVisible: false,
      showList: [],
      xiaoshuoList: [
        {
          name: '起点',
          avatar_url: 'https://www.qidian.com/'
        },
        {
          name: '纵横',
          avatar_url: 'http://www.zongheng.com/'
        },
        {
          name: '潇湘',
          avatar_url: 'https://m.xxsy.net/'
        },
        {
          name: '17K',
          avatar_url: 'https://www.17k.com/'
        },
        {
          name: '笔趣阁',
          avatar_url: 'https://m.biquge5200.com/'
        },
        {
          name: '读全书',
          avatar_url: 'https://www.duquanben.com/'
        },
        {
          name: '悟空书屋',
          avatar_url: 'http://wksw.la/'
        },
        {
          name: '段友小说',
          avatar_url: 'https://xs98k.com/'
        },
        {
          name: '云播搜素',
          avatar_url: 'https://www.boyunso.com/'
        },
        {
          name: '无限小说',
          avatar_url: 'https://m.555x.org/'
        },
        {
          name: '逐浪网',
          avatar_url: 'https://m.zhulang.com/?f=zlpc'
        },
        {
          name: '小说阅读',
          avatar_url: 'https://m.readnovel.com/'
        }
      ],
      shipinList: [
        {
          name: '旋风视频',
          avatar_url: 'https://miao101.com/'
        }, {
          name: '神马影院',
          avatar_url: 'http://www.9rmb.com/'
        }, {
          name: '段友影视',
          avatar_url: 'https://duanyoutv.vip/'
        }, {
          name: '美剧鸟',
          avatar_url: 'http://m.meijuniao.com/'
        }, {
          name: '爱爱客',
          avatar_url: 'http://www.aiaiaike.com/'
        }, {
          name: '逗别看',
          avatar_url: 'http://m.kk6080.cn/'
        }, {
          name: '夏沫影院',
          avatar_url: 'http://xmystv.com/'
        }, {
          name: '樱桃影视',
          avatar_url: 'http://51lia.com/'
        }, {
          name: '哇有',
          avatar_url: 'https://www.wayoutv.com/'
        }, {
          name: '韩剧TV',
          avatar_url: 'https://m.hanjutv.com/'
        }, {
          name: '美剧网',
          avatar_url: 'https://91mjw.com/'
        }, {
          name: '茶杯狐影视搜索',
          avatar_url: 'https://www.cupfox.com/'
        },
        {
          name: '疯狂影视搜索',
          avatar_url: 'http://ifkdy.com/'
        },
        {
          name: '搜罗影视搜索',
          avatar_url: 'http://www.souluo6.com/'
        },
      ],
      dongmanList: [
        {
          name: 'A站',
          avatar_url: 'https://www.acfun.cn/'
        }, {
          name: 'B站',
          avatar_url: 'https://www.bilibili.com/'
        }, {
          name: 'M站',
          avatar_url: 'https://www.missevan.com/'
        }, {
          name: 'D站',
          avatar_url: 'https://www.5dm.tv/'
        }, {
          name: '有妖气',
          avatar_url: 'https://www.u17.com/'
        }, {
          name: 'zzzfun',
          avatar_url: 'http://www.zzzfun.com/'
        }, {
          name: '天马',
          avatar_url: 'https://m.tmdm.tv/'
        }, {
          name: '第一弹',
          avatar_url: 'https://www.diyidan.com/'
        }
      ],
      dianshiList: [
        {
          name: 'hao5',
          avatar_url: 'http://m.hao5.net/'
        },
        {
          name: '91kds',
          avatar_url: 'http://wx.91kds.org/'
        },
        {
          name: 'sillycat',
          avatar_url: 'http://www.sillycat.xyz/live/'
        },
        {
          name: 'IVI测试',
          avatar_url: 'http://ivi.bupt.edu.cn/'
        },
        {
          name: 'sillycat全球',
          avatar_url: 'http://www.sillycat.xyz/VideoOnline/live/index.html'
        },
        {
          name: '10000top全球',
          avatar_url: 'http://www.10000top.com/'
        }
      ],
      zhiboList: [
        {
          name: '斗鱼',
          avatar_url: 'https://m.douyu.com/'
        },
        {
          name: '虎牙',
          avatar_url: 'https://m.huya.com/'
        },
        {
          name: '战旗',
          avatar_url: 'https://m.zhanqi.tv/'
        },
        {
          name: 'YY',
          avatar_url: 'https://wap.yy.com/'
        },
        {
          name: '龙珠',
          avatar_url: 'http://m.longzhu.com/'
        },
        {
          name: '企鹅电竞',
          avatar_url: 'https://egame.qq.com/'
        },
        {
          name: '触手',
          avatar_url: 'https://chushou.tv/'
        },
        {
          name: '火猫',
          avatar_url: 'https://www.huomao.com/mobile/homepage'
        },
        {
          name: '西瓜',
          avatar_url: 'https://live.ixigua.com/'
        },
        {
          name: '哔哩哔哩',
          avatar_url: 'https://live.bilibili.com/h5/'
        }
      ],
      wangpanList: [
        {
          name: '天天云搜',
          avatar_url: 'https://www.ttyunsou.cn/mm/'
        },
        {
          name: 'bdy搜',
          avatar_url: 'http://www.bdyso.com/'
        },
        {
          name: '转盘',
          avatar_url: 'https://www.quzhuanpan.com/'
        },
        {
          name: '如风搜',
          avatar_url: 'http://m.rufengso.net/'
        },
        {
          name: '坑搜',
          avatar_url: 'http://www.kengso.com/'
        },
        {
          name: '57分享',
          avatar_url: 'https://m.57fx.com/file-new/'
        }
      ],
      duanziList: [
        {
          name: '糗事百科',
          avatar_url: 'https://www.qiushibaike.com/'
        },
        {
          name: '百思不得姐',
          avatar_url: 'http://m.budejie.com/'
        },
        {
          name: '泛见智',
          avatar_url: 'http://m.ifanjian.net/'
        },
        {
          name: '暴走动漫',
          avatar_url: 'http://baozoumanhua.com/'
        },
        {
          name: '遨游哈哈',
          avatar_url: 'https://m.hahamx.cn/'
        },
        {
          name: '够雷',
          avatar_url: 'http://gouleide.net/tupian/'
        }
      ],
      zhuangbiList: [
        {
          name: '微信对话',
          avatar_url: 'http://sc.appbs.cn/1.html'
        }, {
          name: '微信零钱',
          avatar_url: 'http://sc.appbs.cn/3.html'
        }, {
          name: '微信红包',
          avatar_url: 'http://sc.appbs.cn/6.html'
        }, {
          name: '微信转账',
          avatar_url: 'http://sc.appbs.cn/2.html'
        }, {
          name: '微信主页',
          avatar_url: 'http://sc.appbs.cn/12.html'
        }, {
          name: '微信新朋友',
          avatar_url: 'http://sc.appbs.cn/13.html'
        }, {
          name: '淘宝订单',
          avatar_url: 'http://sc.appbs.cn/15.html'
        }, {
          name: '支付宝余额',
          avatar_url: 'http://sc.appbs.cn/4.html'
        }, {
          name: '支付宝转账',
          avatar_url: 'http://sc.appbs.cn/8.html'
        }, {
          name: '支付宝聊天',
          avatar_url: 'http://sc.appbs.cn/9.html'
        }, {
          name: '举牌照生成',
          avatar_url: 'http://sc.appbs.cn/5.html'
        }, {
          name: 'QQ对话',
          avatar_url: 'http://sc.appbs.cn/7.html'
        }, {
          name: '短信',
          avatar_url: 'http://sc.appbs.cn/10.html'
        },
      ],
      fanyiList: [
        {
          name: '百度翻译',
          avatar_url: 'https://fanyi.baidu.com/'
        },
        {
          name: 'google翻译',
          avatar_url: 'https://translate.google.cn/'
        },
        {
          name: '有道',
          avatar_url: 'https://m.youdao.com/translate'
        },
        {
          name: '金山词霸',
          avatar_url: 'http://m.iciba.com/'
        },
        {
          name: '腾讯翻译',
          avatar_url: 'https://m.fanyi.qq.com/browser'
        },
        {
          name: '必应翻译',
          avatar_url: 'https://cn.bing.com/translator'
        },
        {
          name: '彩云',
          avatar_url: 'https://fanyi.caiyunapp.com/#/'
        }
      ],
      sousuoList: [
        {
          name: '百度',
          avatar_url: 'https://www.baidu.com/'
        },
        {
          name: '必应',
          avatar_url: 'https://cn.bing.com/?FORM=BEHPTB'
        },
        {
          name: '匿迹',
          avatar_url: 'https://mijisou.com/'
        },
        {
          name: '谷歌',
          avatar_url: 'https://www.google.com/'
        },
        {
          name: '盘搜',
          avatar_url: 'http://m.pansou.com/'
        },
        {
          name: '搜狗',
          avatar_url: 'https://www.sogou.com/'
        },
        {
          name: '360',
          avatar_url: 'https://www.so.com/?src=www&fr=none'
        }
      ],
      bannerList: [
        {
          image_url: 'http://qiniu.lingyouhui.vip/qsh/qshbanner.png',
          click_url: 'https://d.qshme.com/?code=z8mezw'
        },
        {
          image_url: 'https://img.alicdn.com/imgextra/i1/2053469401/O1CN018h6lQJ2JJi0jsrBY0_!!2053469401.jpg',
          click_url: 'https://lingyouhui.vip'
        },
        {
          image_url: 'https://gw.alicdn.com/tfs/TB1U0IBuVT7gK0jSZFpXXaTkpXa-440-180.jpg',
          click_url: 'https://s.click.taobao.com/D9Kuylv'
        }
      ],
      gameLists: [
        {
          img: 'https://mrcuya.gitee.io/yikmresource/fcpic/sj/436a.png',
          tit: '魂斗罗',
          uri: 'https://www.yikm.net/play?id=4137&n=L2Zjcm9tL3NqL0NvbnRyYSAoVSkgWyFdLm5lcw==&t=%E9%AD%82%E6%96%97%E7%BD%97'
        },
        {
          img: 'https://mrcuya.gitee.io/yikmresource/fcpic/2146a.png',
          tit: '超级玛丽',
          uri: 'https://www.yikm.net/play?id=3501&n=L2Zjcm9tL2R6bXgvU3VwZXIgTWFyaW8gQnJvcy4gKFcpIFshXS5uZXM=&t=%E8%B6%85%E7%BA%A7%E9%A9%AC%E9%87%8C%E5%A5%A5'
        },
        {
          img: 'https://mrcuya.gitee.io/yikmresource/fcpic/xyx/2023a.png',
          tit: '雪人兄弟',
          uri: 'https://www.yikm.net/play?id=4511&n=L2Zjcm9tL3h5eC9Tbm93IEJyb3MuIChKKS5uZXM=&t=%E9%9B%AA%E4%BA%BA%E5%85%84%E5%BC%9F'
        },
        {
          img: 'https://mrcuya.gitee.io/yikmresource/fcpic/xyx/timg.png',
          tit: '坦克大战',
          uri: 'https://www.yikm.net/play?id=4275&n=L2Zjcm9tL3h5eC9CYXR0bGUgQ2l0eSAoSikgWyFdLm5lcw==&t=%E5%9D%A6%E5%85%8B%E5%A4%A7%E6%88%98'
        },
        {
          img: 'https://mrcuya.gitee.io/yikmresource/fcpic/1001a.png',
          tit: '冒险岛',
          uri: 'https://www.yikm.net/play?id=3175&n=L2Zjcm9tL2R6bXgvVGFrYWhhc2hpIE1laWppbiBubyBCb3VrZW4gU2hpbWEgKEopIFshXS5uZXM=&t=%E5%86%92%E9%99%A9%E5%B2%9B'
        },
        {
          img: 'https://mrcuya.gitee.io/yikmresource/fcpic/ydbs/1544a.png',
          tit: '热血格斗',
          uri: 'https://www.yikm.net/play?id=4714&n=L2Zjcm9tL3lkYnMvTmVra2V0c3UgS2FrdXRvdSBEZW5zZXRzdSAoSikgWyFdLm5lcw==&t=%E7%83%AD%E8%A1%80%E6%A0%BC%E6%96%97'
        },
        {
          img: 'https://mrcuya.gitee.io/yikmresource/fcpic/gd/2254a.png',
          tit: '激龟快打',
          uri: 'https://www.yikm.net/play?id=3882&n=L2Zjcm9tL2dkL1RlZW5hZ2UgTXV0YW50IEhlcm8gVHVydGxlcyAtIFRvdXJuYW1lbnQgRmlnaHRlcnMgKEUpIFshXS5uZXM=&t=%E6%BF%80%E9%BE%9F%E5%BF%AB%E6%89%93'
        },
      ]
    }
  }

  UNSAFE_componentWillMount() {

  }

  componentDidMount() {

  }

  // 打开webView
  openWebViewFunc(uri, type = 'default') {
    if (uri) {
      this.props.setGlobalInfo({ webViewUri: uri, webViewType: type })
      this.props.navigation.navigate('UpWebView')
    }
  }

  // 关闭碳层并打开
  openWvAndCloFunc(uri) {
    if (uri) {
      this.setState({ showVisible: false }, () => {
        this.props.setGlobalInfo({ webViewUri: uri })
        this.props.navigation.navigate('UpWebView')
      })
    }
  }

  // 显示选项卡
  showSomePop(items) {
    let lists = this.state[items]
    this.setState({ showVisible: true, showList: lists })
  }



  render() {
    return (
      <Container>
        <Content >

          {/* banner */}
          {this.state.bannerList.length ?
            <View style={Styles.bannerCont}>
              <Swiper autoplay
                dot={<View style={{ backgroundColor: 'rgba(0,0,0,.2)', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
                activeDot={<View style={{ backgroundColor: Colors.subject, width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
                paginationStyle={{
                  bottom: 10, left: null, right: 15
                }}
              >
                {this.state.bannerList.map((info, key) => {
                  return (
                    <TouchableOpacity style={Styles.slide} key={key} onPress={() => this.openWebViewFunc(info.click_url)}>
                      <Image resizeMode='stretch' style={Styles.bannerImg} source={{ uri: info.image_url }} />
                    </TouchableOpacity>
                  );
                })}
              </Swiper>
            </View>
            :
            <View></View>
          }



          {/* 工具箱 */}
          <Text style={Styles.textAligns}>点击打开默认，长按查看更多选项</Text>
          <View style={Styles.boxItemsCont}>
            <TouchableWithoutFeedback onLongPress={() => this.showSomePop('shipinList')} onPress={() => this.openWebViewFunc("https://miao101.com/")}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Icon type="FontAwesome" name='film' style={Styles.boxIcons} />
                </View>
                <Text >影视</Text>
              </View>
            </TouchableWithoutFeedback>

            <TouchableWithoutFeedback onLongPress={() => this.showSomePop('dianshiList')} onPress={() => this.openWebViewFunc("http://wx.91kds.org/")}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Icon name='tv' style={Styles.boxIcons} />
                </View>
                <Text >电视</Text>
              </View>
            </TouchableWithoutFeedback>

            <TouchableWithoutFeedback onLongPress={() => this.showSomePop('xiaoshuoList')} onPress={() => this.openWebViewFunc("https://www.qidian.com/")}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Icon name='Lobbyal-notes' style={Styles.boxIcons} />
                </View>
                <Text >小说</Text>
              </View>
            </TouchableWithoutFeedback>

            <TouchableWithoutFeedback onLongPress={() => this.showSomePop('zhiboList')} onPress={() => this.openWebViewFunc("https://m.huya.com/")}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Icon type="MaterialIcons" name='live-tv' style={Styles.boxIcons} />
                </View>
                <Text >直播</Text>
              </View>
            </TouchableWithoutFeedback>
          </View>

          <View style={Styles.boxItemsCont}>
            <TouchableWithoutFeedback onLongPress={() => this.showSomePop('dongmanList')} onPress={() => this.openWebViewFunc("https://www.bilibili.com/")}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Icon name='cash' style={Styles.boxIcons} />
                </View>
                <Text >动漫</Text>
              </View>
            </TouchableWithoutFeedback>

            <TouchableWithoutFeedback onLongPress={() => this.showSomePop('duanziList')} onPress={() => this.openWebViewFunc("https://www.qiushibaike.com/")}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Icon name='happy' style={Styles.boxIcons} />
                </View>
                <Text >搞笑段子</Text>
              </View>
            </TouchableWithoutFeedback>

            <TouchableWithoutFeedback onLongPress={() => this.showSomePop('zhuangbiList')} onPress={() => this.openWebViewFunc("http://sc.appbs.cn/")}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Icon name='image' style={Styles.boxIcons} />
                </View>
                <Text >假图生成</Text>
              </View>
            </TouchableWithoutFeedback>

            <TouchableWithoutFeedback onLongPress={() => this.showSomePop('wangpanList')} onPress={() => this.openWebViewFunc("https://www.ttyunsou.cn/mm/")}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Icon name='cloud-done' style={Styles.boxIcons} />
                </View>
                <Text >网盘</Text>
              </View>
            </TouchableWithoutFeedback>
          </View>

          <View style={Styles.boxItemsCont}>
            {/* <TouchableWithoutFeedback onLongPress={() => this.showSomePop('dongmanList')} onPress={() => this.openWebViewFunc("https://www.bilibili.com/")}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Icon type="FontAwesome" name='film' style={Styles.boxIcons} />
                </View>
                <Text >动漫</Text>
              </View>
            </TouchableWithoutFeedback>

            <TouchableWithoutFeedback onLongPress={() => this.showSomePop('wangpanList')} onPress={() => this.openWebViewFunc("https://www.ttyunsou.cn/mm/")}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Icon name='tv' style={Styles.boxIcons} />
                </View>
                <Text >网盘</Text>
              </View>
            </TouchableWithoutFeedback> */}

            <TouchableWithoutFeedback onLongPress={() => this.showSomePop('fanyiList')} onPress={() => this.openWebViewFunc("https://m.youdao.com/translate")}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Icon type="MaterialIcons" name='live-tv' style={Styles.boxIcons} />
                </View>
                <Text >在线翻译</Text>
              </View>
            </TouchableWithoutFeedback>

            <TouchableWithoutFeedback onLongPress={() => this.showSomePop('sousuoList')} onPress={() => this.openWebViewFunc("https://cn.bing.com/?FORM=BEHPTB")}>
              <View style={Styles.barBodyItems}>
                <View>
                  <Icon name='search' style={Styles.boxIcons} />
                </View>
                <Text >搜索引擎</Text>
              </View>
            </TouchableWithoutFeedback>
          </View>

          <Text style={Styles.textAligns}>实用小工具</Text>
          <View style={Styles.btnItemCont}>

            <TouchableHighlight onPress={() => this.openWebViewFunc("https://lingyouhui.vip")}>
              <Text style={Styles.btnItems}> 优惠券 </Text>
            </TouchableHighlight >

            <TouchableHighlight onPress={() => this.openWebViewFunc("https://send.eyhn.cloud/")}>
              <Text style={Styles.btnItems}> 临时文件分享 </Text>
            </TouchableHighlight >

            <TouchableHighlight onPress={() => this.openWebViewFunc("https://graph.baidu.com/view/home")}>
              <Text style={Styles.btnItems}> 以图搜图 </Text>
            </TouchableHighlight >

            <TouchableHighlight onPress={() => this.openWebViewFunc("https://xw.tianqi.qq.com/")}>
              <Text style={Styles.btnItems}> 天气 </Text>
            </TouchableHighlight >

          </View>

          <Text style={Styles.textAligns}>小游戏</Text>
          <View style={Styles.btnItemCont}>

            <TouchableHighlight onPress={() => this.openWebViewFunc("https://www.tool2.cn/Gams/fishing/", 'game')}>
              <Text style={Styles.btnItems}> 捕鱼达人 </Text>
            </TouchableHighlight >

            <TouchableHighlight onPress={() => this.openWebViewFunc("https://www.tool2.cn/Gams/PlaneWars/", 'game')}>
              <Text style={Styles.btnItems}> 飞机大战 </Text>
            </TouchableHighlight >

          </View>




          {/* 工具箱 */}
          <View style={Styles.boxItemsCont}>
            <Card>
              <CardItem>
                <Icon active name="logo-game-controller-b" style={Styles.boxIcons} />
                <Text>热门游戏</Text>
                <Right>
                  <Icon name="arrow-forward" />
                </Right>
              </CardItem>
            </Card>
          </View>

          <List>
            {
              this.state.gameLists.map((l, i) => (
                <ListItem
                  key={i}
                  leftAvatar={{ source: { uri: l.img } }}
                  title={l.tit}
                  bottomDivider
                  chevron
                  onPress={() => {
                    this.openWebViewFunc(l.uri, 'game')
                  }}
                />
              ))
            }
          </List>

          <Overlay isVisible={this.state.showVisible} onBackdropPress={() => this.setState({ showVisible: false })}>
            <View style={Styles.btnItemCont}>
              {
                this.state.showList.map((l, i) => (
                  <TouchableHighlight key={i} onPress={() => this.openWvAndCloFunc(l.avatar_url)}>
                    <Text style={Styles.btnItems}> {l.name} </Text>
                  </TouchableHighlight >
                ))
              }
            </View>
          </Overlay>

        </Content>
      </Container>
    );
  }

}

const mapStateToProps = state => ({
  logged: state.user.logged,
  token: state.user.token,

});

const mapDispatchToProps = dispatch => ({
  setGlobalInfo: globalInfo => dispatch({ type: 'SET_GLOBALINFO', payload: { globalInfo } }),
});
export default connect(mapStateToProps, mapDispatchToProps)(Home);

const Styles = StyleSheet.create({
  // banner
  bannerCont: {
    width: Metrics.width,
    height: Metrics.width * 0.4026,
    borderRadius: 0,
    overflow: "hidden"
  },
  slide: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'transparent'
  },
  bannerImg: {
    flex: 1
  },
  textAligns: {
    textAlign: 'center',
    margin: 8
  },
  // 工具箱
  boxItemsCont: {
    flexDirection: 'row',
    justifyContent: 'center',
    paddingTop: 10
  },
  barBodyItems: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  boxIcons: {
    fontSize: 24,
    color: Colors.subject
  },
  boxText: {
    fontSize: 14,
    color: Colors.hei1
  },
  // 按钮容器
  btnItemCont: {
    flex: 1,
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: "space-around"
  },
  btnItems: {
    width: 120,
    lineHeight: 45,
    margin: 5,
    backgroundColor: Colors.subject,
    color: Colors.bai,
    textAlign: 'center',
    borderRadius: 5
  }
});